<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>应用商城首页</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
    <script>
      // 设置当前时间
      document.addEventListener("DOMContentLoaded", function () {
        const timeElement = document.querySelector(".time");
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        timeElement.textContent = `${hours}:${minutes}`;
      });
    </script>
    <style>
      /* 新增精选应用横版布局样式 */
      .featured-apps {
        padding: 0 16px;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
      }
      .featured-apps::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
      }
      .featured-app-item {
        display: inline-block;
        width: 80px;
        margin-right: 16px;
        text-align: center;
      }
      .featured-app-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        margin: 0 auto 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      .featured-app-name {
        font-size: 12px;
        color: #333;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 32px;
      }
    </style>
  </head>
  <body>
    <div class="iphone-container">
      <!-- iOS 状态栏 -->
      <div class="status-bar">
        <div class="status-bar-icons">
          <span class="time">14:30</span>
        </div>
        <div class="status-bar-icons">
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi ml-2"></i>
          <i class="fas fa-battery-full ml-2"></i>
        </div>
      </div>

      <!-- 顶部导航 -->
      <div
        class="flex justify-between items-center px-4 py-2 bg-white sticky top-0 z-10"
      >
        <div class="flex items-center">
          <img
            src="https://img.hsbkw.com/2025/03/20250303142056892.jpg"
            alt="用户头像"
            class="avatar"
          />
        </div>
        <div class="search-box flex-1 mx-4">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="搜索应用、游戏" readonly />
        </div>
        <div class="relative">
          <i class="fas fa-bell text-gray-600 text-xl"></i>
          <span
            class="absolute -top-1 -right-1 bg-red-500 rounded-full w-4 h-4 flex items-center justify-center text-white text-xs"
            >3</span
          >
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="content">
        <!-- 轮播图 -->
        <div class="swiper px-4 mt-3">
          <img
            src="https://img.hsbkw.com/2025/03/20250308180341276.png"
            alt="轮播图"
            class="swiper-image"
          />
        </div>

        <!-- 金刚区 -->
        <div class="quick-nav">
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-blue-50">
              <i class="fas fa-gamepad text-blue-500"></i>
            </div>
            <span class="quick-nav-text">游戏</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-green-50">
              <i class="fas fa-book text-green-500"></i>
            </div>
            <span class="quick-nav-text">教育</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-yellow-50">
              <i class="fas fa-video text-yellow-500"></i>
            </div>
            <span class="quick-nav-text">视频</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-red-50">
              <i class="fas fa-music text-red-500"></i>
            </div>
            <span class="quick-nav-text">音乐</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-purple-50">
              <i class="fas fa-palette text-purple-500"></i>
            </div>
            <span class="quick-nav-text">艺术</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-indigo-50">
              <i class="fas fa-heart text-indigo-500"></i>
            </div>
            <span class="quick-nav-text">健康</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-pink-50">
              <i class="fas fa-shopping-bag text-pink-500"></i>
            </div>
            <span class="quick-nav-text">购物</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-gray-50">
              <i class="fas fa-chart-line text-gray-500"></i>
            </div>
            <span class="quick-nav-text">金融</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-blue-50">
              <i class="fas fa-utensils text-blue-500"></i>
            </div>
            <span class="quick-nav-text">美食</span>
          </div>
          <div class="quick-nav-item">
            <div class="quick-nav-icon bg-green-50">
              <i class="fas fa-ellipsis-h text-green-500"></i>
            </div>
            <span class="quick-nav-text">更多</span>
          </div>
        </div>

        <!-- 精选应用 (横版改版) -->
        <div class="section-title">
          <span>精选应用</span>
          <span class="section-more">查看全部</span>
        </div>
        <div class="featured-apps pb-4">
          <div class="featured-app-item">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5VmIvZv2DIM2G4r7w1ZBLdOIpKVL2o1gtrA&s"
              alt="微信"
              class="featured-app-icon"
            />
            <div class="featured-app-name">微信</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJdKqcupD9Oka3KtTtoSY7JlhFW5f-WCY4CyeAamIxcQoV-n6t47bilTFgA6kcsGhHdRA&usqp=CAU"
              alt="抖音"
              class="featured-app-icon"
            />
            <div class="featured-app-name">抖音</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_PHukAmhZdsgWGqiIVhy06gYOLIfMKD1Hm20PSt7lY8XNxZvymg0P7-I3rVQ8SPErKDU&usqp=CAU"
              alt="王者荣耀"
              class="featured-app-icon"
            />
            <div class="featured-app-name">王者荣耀</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUDFTRgQ0rfkJGBxvKEg922qnLASG8qhfqEOzsnLhD-33qhHG-CvUs83HHz_4lPCESHohJYnf_XPR3dw92o7rLtkBfSydrh09BLdr3rw"
              alt="原神"
              class="featured-app-icon"
            />
            <div class="featured-app-name">原神</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/f5/77/96/f5779614-9cea-1212-3cdd-fbbf6f9d1bfc/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="淘宝"
              class="featured-app-icon"
            />
            <div class="featured-app-name">淘宝</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/e7/38/85/e738855e-7637-3d47-6853-a144b8db3cf3/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="QQ音乐"
              class="featured-app-icon"
            />
            <div class="featured-app-name">QQ音乐</div>
          </div>
          <div class="featured-app-item">
            <img
              src="https://is1-ssl.mzstatic.com/image/thumb/Purple116/v4/3b/aa/32/3baa32f9-b13f-efe2-c97e-2d7f08fb1d76/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/460x0w.webp"
              alt="爱奇艺"
              class="featured-app-icon"
            />
            <div class="featured-app-name">爱奇艺</div>
          </div>
        </div>

        <!-- 精选文章 -->
        <div class="section-title">
          <span>精选文章</span>
          <span class="section-more">查看全部</span>
        </div>
        <div class="article-card">
          <img
            src="https://img.hsbkw.com/2025/03/20250308180341276.png"
            alt="文章封面"
            class="article-cover"
          />
          <div class="article-info">
            <div class="article-title">2025年最值得关注的十大应用</div>
            <div class="article-desc">
              从工作效率到娱乐，这些应用将改变你的生活方式...
            </div>
            <div class="article-meta">
              <span>应用推荐</span>
              <span>10分钟前</span>
            </div>
          </div>
        </div>
        <div class="article-card">
          <img
            src="https://img.hsbkw.com/2025/03/20250308180341276.png"
            alt="文章封面"
            class="article-cover"
          />
          <div class="article-info">
            <div class="article-title">如何利用应用提高工作效率</div>
            <div class="article-desc">这些实用技巧让你的工作事半功倍...</div>
            <div class="article-meta">
              <span>效率指南</span>
              <span>2小时前</span>
            </div>
          </div>
        </div>

        <!-- 热门游戏 -->
        <div class="section-title">
          <span>热门游戏</span>
          <span class="section-more">查看全部</span>
        </div>
        <div class="app-card">
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_PHukAmhZdsgWGqiIVhy06gYOLIfMKD1Hm20PSt7lY8XNxZvymg0P7-I3rVQ8SPErKDU&usqp=CAU"
            alt="应用图标"
            class="app-icon"
          />
          <div class="app-info">
            <div class="app-name">王者荣耀</div>
            <div class="app-category">MOBA游戏</div>
            <div class="flex justify-between items-center">
              <div class="app-rating">
                <i class="fas fa-star"></i>
                <span class="app-rating-value">4.8</span>
                <span class="app-download">5亿次下载</span>
              </div>
              <button class="app-download-btn">获取</button>
            </div>
          </div>
        </div>
        <div class="app-card">
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUDFTRgQ0rfkJGBxvKEg922qnLASG8qhfqEOzsnLhD-33qhHG-CvUs83HHz_4lPCESHohJYnf_XPR3dw92o7rLtkBfSydrh09BLdr3rw"
            alt="应用图标"
            class="app-icon"
          />
          <div class="app-info">
            <div class="app-name">原神</div>
            <div class="app-category">角色扮演</div>
            <div class="flex justify-between items-center">
              <div class="app-rating">
                <i class="fas fa-star"></i>
                <span class="app-rating-value">4.5</span>
                <span class="app-download">2亿次下载</span>
              </div>
              <button class="app-download-btn">获取</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="tab-bar">
        <div class="tab-item active">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-download"></i>
          <span>下载</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-comment-dots"></i>
          <span>消息</span>
        </div>
        <div class="tab-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </div>
      </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="../js/main.js"></script>
  </body>
</html>
